<template>
  <div class="block-container create-cont" v-loading="loading">
    <a class="back" @click="gotoExamListPage"><i class="el-icon-back"></i><span>返回</span></a>
    <P class="big-font">创建考点</P>
    <el-form ref="form" :model="form" label-width="120px" class="c-form">
      <el-form-item label="所在区域：">
        <el-select v-model="form.area" placeholder="请选择所在区域" style="width:400px;" @change="changeArea" disabled>
          <el-option v-for="(item,idx) in schoolList" :key="idx" :label="item.areaName" :value="item.areaName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择考点：">
        <div class="item" v-for="(s, i) in school" :key="i">
          <div class="school" @click="s.isPoint = s.isPoint === '0' ? '1' : '0'">
            <p>{{s.areaName}}</p>
            <!-- <p>镇海应行久 外语实验学校</p> -->
            <i v-if="s.isPoint === '0'" class="el-icon-success"> </i>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="考试天数：">
        <el-input v-model="form.days" disabled style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item label="考试日期：">
        <div style="width:400px;">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.beginDate" style="width: 100%;" disabled></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align:center;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.endDate" style="width: 100%;" disabled></el-date-picker>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item label="考试批数：">
        <!-- <el-select v-model="form.region" placeholder="请选择所在区域" style="width:400px;">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select> -->
        <el-input v-model="form.batches" disabled style="width:400px;"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="primary" class="c-btn" @click="addExamSite">确定</el-button>
      <el-button class="c-btn" @click="gotoExamListPage">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        area: '',
        batches: '',
        days: '',
        beginDate: '',
        endDate: ''
      },
      school: [],
      schoolList: [],
      loading: false
    }
  },
  methods: {
    // 返回考点列表
    gotoExamListPage () {
      this.$router.push({ name: 'examinationSite' })
    },
    // 获取区域列表
    getAreaList () {
      let that = this
      that.$http.getSchoolListByArea({ areaName: that.form.area }).then(res => {
        if (res.code === 20000) {
          that.school = res.data
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    // 获取考试计划时间&批次
    async getTime () {
      let res = await this.$http.findBatchTime('')
      if (res.code === 20000) {
        this.form.batches = res.data.batches
        this.form.days = res.data.days
        this.form.beginDate = new Date(res.data.beginDate)
        this.form.endDate = new Date(res.data.endDate)
      } else {
        this.$message.error(res.msg)
      }
    },
    // 选择区域时改变区域下的考点列表
    changeArea () {
      for (let i = 0; i < this.schoolList.length; i++) {
        if (this.form.area === this.schoolList[i].id) {
          this.school = this.schoolList[i].child
        }
      }
    },
    // 新增考点
    addExamSite () {
      let that = this
      let _schoolName = ''
      that.school.map(item => {
        if (item.isPoint === '0') {
          _schoolName += `${item.areaName},`
        }
      })
      that.$http.cerateExamSite({ areaName: sessionStorage.getItem('area'), schoolName: _schoolName.substring(0, _schoolName.length - 1) }).then(res => {
        if (res.code === 20000) {
          that.gotoExamListPage()
        } else {
          that.$message.error(res.msg)
        }
      })
    }
  },
  mounted () {
    this.loading = true
    this.form.area = sessionStorage.getItem('area')
    this.getAreaList()
    this.getTime()
    this.loading = false
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
 .back
    cursor pointer
    font-size 14px
    color color
    span
      margin-left 10px
  .big-font
    font-size 18px
    font-weight bold
    color #555
    line-height 48px
    margin-bottom 10px
  .item
    float left
    margin-bottom 18px
    margin-right 18px
    .school
      width 126px
      height 94px
      border 1px solid #ccc
      border-radius:4px;
      position relative
      cursor pointer
      &:hover
        border-color color
      p
        text-align center
        line-height 94px
      i
        position absolute
        bottom 10px
        right 10px
        color color
        font-size 18px
  .fuzhu
    top 10px
    margin-bottom 20px
  .btn
    a
      display inline-block
      width 70px
      height 38px
      text-align center
      line-height 38px
      border-radius 5px
      color #fff
      text-decoration none
      margin-right 14px
      &.save
        background color
      &.cancel
        color color
        border 1px solid color
</style>
